<template>
  <view class="content">
    <view class="content-menu">
      <view class="menu-banner" @click="onRecruit">
      </view>
    </view>
    <up-sticky bgColor="#fff">
      <view class="banner-search" :style="'top:' + capsuleHeight + 'rpx'">
        <view class="search-logo">
          <image src="../../static/logo.png" mode=""></image>
        </view>
        <view class="search-nav" @click="onSearch">
          <up-search placeholder="搜索作者或产品名" :showAction="false" v-model="keyword"></up-search>
        </view>
      </view>
      <view class="content-category">
        <view class="content-grid">
          <view class="grid-nav" v-for="item,index in 4" :key="index" @click="onProduct">
            <image src="https://img.js.design/assets/img/66d131401efe7fb16fa2bd50.png#2c0431020366a8f12d6a2706c34e6168" mode=""></image>
            <view class="grid-title">连衣裙</view>
          </view>
        </view>
        <view class="content-title">
          <image src="@/static/icon/index/create.png" mode="aspectFit"></image>
          创作广场
        </view>
        <view class="content-tab">
          <tabs-list :list="creationList" @change="onCreation"></tabs-list>
        </view>
      </view>
    </up-sticky>
    <view class="content-list">
      <view class="list-nav">
        <up-waterfall v-model="flowList">
          <template v-slot:left="{leftList}">
            <view v-for="(item, index) in 10" :key="index">
              <product-display></product-display>
            </view>
          </template>
          <template v-slot:right="{rightList}">
            <view v-for="(item, index) in 9" :key="index">
              <product-display></product-display>
            </view>
          </template>
        </up-waterfall>
      </view>
    </view>
  </view>
  <tab-bar currentSelect="home" @showBottom="onShowBottom"></tab-bar>
  <tab-popup :show.sync="show" @showClose="onShowClose"></tab-popup>
</template>

<script setup>
  import {
    ref,
    reactive
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  const show = ref(false)
  const capsuleHeight = ref("")
  const keyword = ref("")
  const lineBg = "../../static/icon/user/line-list.png";
  const creationList = reactive([{
      name: "最新"
    },
    {
      name: "推荐"
    }
  ])
  onLoad(() => {
    const sysInfo = wx.getSystemInfoSync();
    capsuleHeight.value = (sysInfo.statusBarHeight + 32) + sysInfo.safeArea.top;
  })

  function onSearch() {
    uni.navigateTo({
      url: '/subpages/index/search-global'
    })
  }

  function onProduct() {
    uni.navigateTo({
      url: "/subpages/index/work-product"
    })
  }

  function onRecruit() {
    uni.navigateTo({
      url: "/subpages/index/recruit-page"
    })
  }

  function onCreation(e) {
    console.log(e, 4444)
  }

  function onShowBottom(val) {
    show.value = val
  }

  function onShowClose(val) {
    show.value = val
  }
</script>

<style lang="less" scoped>
  .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;

    .content-menu {
      width: 100%;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      // padding-top: var(--status-bar-height);

      .menu-banner {
        width: 100%;
        height: 420rpx;
        border-radius: 0 0 32rpx 32rpx;
        background: linear-gradient(0deg, #FF99B1 0%, #FF416C 99.44%);
        box-sizing: border-box;
        // padding-top: var(--status-bar-height);


      }
    }

    .banner-search {
      width: 100%;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 0 32rpx;
      position: fixed;

      .search-logo {
        width: 140rpx;
        height: 50rpx;
        position: absolute;
        left: 32rpx;

        image {
          width: 140rpx;
          height: 50rpx;
        }
      }

      .search-nav {
        width: 50vw;
        height: 72rpx;
      }
    }

    /deep/ .u-sticky {
      width: 100%;
    }

    .content-category {
      width: 100%;
      background-color: #fff;

      .content-grid {
        display: flex;
        width: 100%;
        height: 244rpx;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        padding: 0 24rpx;

        .grid-nav {
          width: 156rpx;
          height: 100%;
          opacity: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);

          image {
            width: 132rpx;
            height: 92rpx;
          }
        }
      }

      .content-title {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 36rpx;
        font-size: 40rpx;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);

        image {
          width: 40rpx;
          height: 40rpx;
          margin-right: 12rpx;
        }
      }

      .content-tab {
        box-sizing: border-box;
        padding: 0 48rpx;
        margin-top: 34rpx;

        /deep/ .u-tabs__wrapper__nav__item {
          position: relative;
        }

        /deep/ .u-tabs__wrapper__nav__line {
          position: absolute;
          top: 16rpx;
          right: 91%;
        }
      }
    }

    .content-list {
      width: 100%;
      display: flex;
      flex-direction: column;
      background-color: #F2F2F2;

      .list-nav {
        box-sizing: border-box;
        padding: 0 24rpx;
      }
    }
  }
</style>